<template>

  <el-drawer v-model="reviewDrawer" size="90%" title="审核商品">
    <el-button type="primary" @click="approveDraft">通过审核</el-button>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="参数详情">
        <admin-review-resource :origin="resource" :review-obj="resourceDraft"></admin-review-resource>
      </el-collapse-item>
      <el-collapse-item title="图文描述">
        <div v-if="resourceDraft.introduceId!==resource.introduceId" v-html="contentDraft"/>
        <el-tag v-else type="success">图文描述未修改</el-tag>
      </el-collapse-item>
    </el-collapse>
  </el-drawer>

  <el-collapse v-model="activeNames">
    <el-collapse-item v-loading="resourceLoading" title="资源详情" name="1">
      <el-descriptions :column="3" border>
        <el-descriptions-item label="资源编号">{{ resource.resourceNo }}</el-descriptions-item>
        <el-descriptions-item label="资源名称">{{ resource.resourceName }}</el-descriptions-item>
        <el-descriptions-item label="所在城市">{{ cityToStr(resource.city) }}</el-descriptions-item>
        <el-descriptions-item label="所在地址">{{ resource.address }}</el-descriptions-item>
        <el-descriptions-item label="负责人电话">{{ resource.phone }}</el-descriptions-item>
        <el-descriptions-item label="预设库存">{{ resource.defaultStore }}</el-descriptions-item>
        <el-descriptions-item label="预设价格">{{ resource.defaultPrice }}</el-descriptions-item>
        <el-descriptions-item label="开放天数">{{ resource.openDay }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ resource.updateTime }}</el-descriptions-item>
        <el-descriptions-item label="上下架状态" :declare-var="hereSellState=sellState[resource.sellState]">
          <el-tag :type="hereSellState?.tagType">{{ hereSellState?.str }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="编辑状态" :declare-var="hereEditState=editState[resource.editState]">
          <el-tag :type="hereEditState?.tagType">{{ hereEditState?.str }}</el-tag>
          <el-button type="primary" size="small" v-if="resource.editState===1"
                     @click="reviewDrawer=true">审核
          </el-button>
        </el-descriptions-item>
        <el-descriptions-item label="供应商">
          <el-button @click="addNewContact('supplier',resource.supplierId)" plain type="primary">联系供应商
          </el-button>
        </el-descriptions-item>
        <el-descriptions-item label="管理状态" :declare-var="hereAdminState=adminState[resource.adminState]">
          <el-tag :type="hereAdminState?.tagType">{{ hereAdminState?.str }}</el-tag>
          <el-select v-model="editAdminState">
            <el-option
                v-for="(value,key) in adminState"
                :key="key"
                :label="value.str"
                :value="key"
            />
          </el-select>
          <el-button type="primary" size="small" :disabled="resource.adminState==editAdminState"
                     @click="updateAdminState">更新状态
          </el-button>
        </el-descriptions-item>

      </el-descriptions>
    </el-collapse-item>
    <el-collapse-item v-loading="storeLoading" title="库存详情" name="2">
      <el-descriptions border :column="2">
        <el-descriptions-item align="center"
                              width="10px"
                              v-for="item in storeList"
                              :key="item.date"
                              :label="item.date">
          <div>
            库存:{{ item.store }}
          </div>
          <div>
            价格:{{ item.price }}
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-collapse-item>
    <el-collapse-item v-loading="contentLoading" title="详情页" name="3">
      <div v-html="content"></div>
    </el-collapse-item>
  </el-collapse>


</template>
<script>
// https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive
// https://www.zhihu.com/question/500937713
export default {name: 'AdminDetail'}
</script>
<script setup>
import { onBeforeMount, ref, watch,} from "vue";
import axios from "~/config/axios.js";
import {useRoute} from "vue-router";
import { showSuccessAndReload, cityToStr} from "~/config/utils.js";
import '@wangeditor/editor/dist/css/style.css'
import {addNewContact} from "~/config/utils.js"
import router from "~/config/router.js"
import {editState, adminState, sellState, initObj} from "~/config/const.js";
import AdminReview from "~/components/AdminReviewTraffic.vue";
import AdminReviewResource from "~/components/AdminReviewResource.vue";


const activeNames = ['1', '2', '3']

const resourceId = useRoute().params.id
const resource = ref({})
const copyResource = ref({})
const resourceLoading = ref(true)
const editAdminState = ref()

onBeforeMount(async () => {
  resource.value = await axios.get(`/resource/${resourceId}`);
  copyResource.value = JSON.parse(JSON.stringify(resource.value));
  editAdminState.value = resource.value.adminState + ''
  resourceLoading.value = false
});
const updateAdminState = () => {
  axios.post(`/resource/${resource.value.resourceId}/${resource.value.updateTime}/adminEditAdminState`, {
    beforeState: resource.value.adminState,
    afterState: editAdminState.value
  }).then(res => {
    showSuccessAndReload()
  })
}
// ------------------------------------------------------------------
const reviewDrawer = ref(false)
const draftObj = ref({})
const resourceDraft = ref()
const contentDraft = ref()
watch(resource, async () => {
  if (resource.value.editState === 1 || ![0, 1].includes(resource.value.adminState)) {
    draftObj.value = await axios.get(`/resource/${resourceId}/draft`);
    resourceDraft.value = draftObj.value.json
    if (resourceDraft.value.introduceId !== resource.value.introduceId) {
      contentDraft.value = await axios.get(`/introduce/${resourceDraft.value.introduceId}`);
    }
  }
})
const approveDraft = () => {
  axios.post(`/resource/${resourceId}/adminApproveDraft/${draftObj.value.draftId}/${draftObj.value.updateTime}`)
      .then(res => {
        showSuccessAndReload()
      })
}
// -------------------------------------------------------------
const storeList = ref([])
const storeLoading = ref(true)
watch(resource, async () => {
  storeList.value = await axios.get(`/store/${resource.value.productType}/${resource.value.resourceId}`);
  storeLoading.value = false
})
// --------------------------------------------------------------
const content = ref()
const contentLoading = ref(true)
watch(resource, async () => {
  content.value = await axios.get(`/introduce/${resource.value.introduceId}`);
  contentLoading.value = false
})


</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
